<template>
  <view class="content">


    <!-- 这里class 后套了一层 名字有点问题 -->
    <view class="dingji-list" style="width: 750upx;">
      <view v-for="item in list">
        <view class="list" v-if="item.art_type==0" @click="to_article(item.article_id)">
          <view class="list-top">
            <view class="list-top-img">
              <image :src="item.avatar?item.avatar:'https://mes.renkangshangcheng.cn/appimage/bz.png'"></image>
            </view>
            <view class="list-top-info">
              <view class="list-top-info-name">{{ item.nick_name }}</view>
              <view class="list-top-info-date">{{ item._update_time }}</view>
            </view>
          </view>

          <view class="list-bottom">
            <!-- 内容-文章-置顶 -->
            <view class="article">
              <view class="article-title">
                {{ item.title }}
              </view>
              <view class="article-imgs">
                <image v-for="(items,indexs) in item.cover_images" :src="items" v-if="items"
                       class="article-img"></image>

              </view>
              <view style="width: 710upx;height: 2upx;background-color: #f4f4f4;margin-top: 20upx;"></view>
              <view class="user-cz">
                <view class="user-cz-c">
                  <image class="user-cz-operation" src="https://mes.renkangshangcheng.cn/appimage/xx.png"
                         mode=""></image>
                  {{ item.collect_num }}
                </view>
                <view class="user-cz-c">
                  <image class="user-cz-operation" src="https://mes.renkangshangcheng.cn/appimage/pl.png"
                         mode=""></image>
                  {{ item.comment_num }}
                </view>
                <view class="user-cz-c">
                  <image class="user-cz-operation" src="https://mes.renkangshangcheng.cn/appimage/dianzan.png"
                         mode=""></image>
                  {{ item.zan_num }}
                </view>
              </view>
            </view>

          </view>
        </view>

        <!-- 内容-视频-置顶 -->

        <view class="videos" v-if="item.art_type==1" @click="to_article(item.article_id)">
          <view class="list-top">
            <view class="list-top-img">
              <image :src="item.avatar?item.avatar:'https://mes.renkangshangcheng.cn/appimage/bz.png'"></image>
            </view>
            <view class="list-top-info">
              <view class="list-top-info-name">{{ item.nick_name }}</view>
              <view class="list-top-info-date">{{ item._update_time }}</view>
            </view>
          </view>
          <view class="article-title">
            {{ item.title }}
          </view>
          <image class="videos-imgs" :src="item.cover_images[0]"></image>
          <view style="width: 710upx;height: 2upx;background-color: #f4f4f4;margin-top: 20upx;"></view>
          <view class="user-cz">
            <view class="user-cz-c">
              <image class="user-cz-operation" src="https://mes.renkangshangcheng.cn/appimage/xx.png" mode=""></image>
              {{ item.collect_num }}
            </view>
            <view class="user-cz-c">
              <image class="user-cz-operation" src="https://mes.renkangshangcheng.cn/appimage/pl.png" mode=""></image>
              {{ item.comment_num }}
            </view>
            <view class="user-cz-c">
              <image class="user-cz-operation" src="https://mes.renkangshangcheng.cn/appimage/dianzan.png"
                     mode=""></image>
              {{ item.zan_num }}
            </view>
          </view>
        </view>
        <view v-if="index+1!=list.length" style="width: 750upx;height: 20upx;background-color: #F8F8F8;"></view>
      </view>
    </view>


    <!-- <view class="list" v-for="(num,index) in data" :key="index"></view> -->
    <!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->


  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      chooseType: 'gz',
      data: [],
      loadMoreText: "加载中...",
      showLoadMore: false,
      max: 0,
      formData: {
        page: 1,
        limit: 10
      },
      list: []
    };
  },
  onLoad() {
    this.initData();
    this.get_list();
  },
  onShow() {


  },
  onUnload() {
    this.max = 0,
        this.data = [],
        this.loadMoreText = "加载更多",
        this.showLoadMore = false;
  },
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  onReachBottom() {
    // if (this.max > 40) {
    // 	this.loadMoreText = "没有更多数据了!"
    // 	return;
    // }
    // this.showLoadMore = true;
    // setTimeout(() => {
    // 	this.setListData();
    // }, 300);
    this.formData.page = this.formData.page + 1
    this.get_list()
  },
  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {
    this.formData.page = 1;
    this.list = []
    this.get_list()
    this.initData();
  },
  methods: {
    qiehuan(type) {
      this.chooseType = type;
    },
    initData() {
      setTimeout(() => {
        this.max = 0;
        this.data = [];
        let data = [];
        this.max += 20;
        for (var i = this.max - 19; i < this.max + 1; i++) {
          data.push(i)
        }
        this.data = this.data.concat(data);
        uni.stopPullDownRefresh(); // 结束下拉刷新
      }, 300);
    },
    setListData() {
      let data = [];
      this.max += 10;
      for (var i = this.max - 9; i < this.max + 1; i++) {
        data.push(i)
      }
      this.data = this.data.concat(data);
    },
    get_list() {
      var _this = this;
      var data = _this.formData;
      var list = this.list
      _this.$api.doRequest("post", "api/my_views", data).then(res => {
        console.log(res.data.data.list)
        list = list.concat(res.data.data.list)
        _this.list = list
      })
    },
    to_article(id) {
      uni.navigateTo({
        url: "/pages/article/index?id=" + id
      })
    }
  }
};
</script>

<style>
.content {
  width: 750upx;
  height: 100vh;
  /* background-color: #F8F8F8; */
}

.list {
  width: 710upx;
  /* height: 450upx; */
  margin: 0 auto;
  background-color: #fff;


}

.list-top {
  height: 130upx;
  width: 710upx;
  display: flex;
}

.list-top-img {
  flex: 1;
}

.list-top-img image {
  width: 88upx;
  height: 88upx;
  margin-top: 21upx;
}

.list-top-info {
  flex: 6;
}

.list-top-info-name {
  color: #000000;
  font-size: 28upx;
  margin-top: 30upx;
}

.list-top-info-date {
  color: #666666;
  font-size: 24upx;
}

.article {
  width: 710upx;
  margin: 0upx auto;
  margin-top: 15upx;
}

.article-title {
  font-size: 32upx;
  font-weight: 500;
  color: #000;
  margin: 10upx 0;
}

.article-imgs {
  width: 710upx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-decoration: none;
}

.articles {
  height: 800upx;
  width: 100%;
  background-color: #39B54A;
}

.article-img {
  width: 32%;
  height: 130upx;
  border-radius: 15upx;;
}

.article-zd {
  display: inline-block;
  border: 1px solid #FD603A;
  margin: 15upx 0upx;
  color: #FD603A;
  padding: 5upx 5upx;
  border-radius: 10upx;
  font-size: 14upx;
}

.user-cz {
  display: flex;
  margin-top: 10upx;
}

.user-cz-c {
  flex: 1;
  text-align: center;
}

.user-cz-operation {
  width: 25upx;
  height: 25upx;
  margin-right: 10upx;
}

.videos {
  width: 710upx;
  margin: 0upx auto;
  margin-top: 15upx;
}

.videos-imgs {
  width: 710upx;
  height: 450upx;
}


</style>





